<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      stripe
      row-key="id"
      style="width: 100%"
      height="650"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        reserve-selection
      ></el-table-column>
      <el-table-column
        label="拖拽排序"
        width="80"
        align="center"
        v-if="sortFlag"
      >
        <template slot-scope="{ row }">
          <i
            class="el-icon-rank allowDrag"
            :data-id="row.id"
            style="cursor: move"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="文章标题" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <el-tag
            effect="dark"
            size="mini"
            type="danger"
            style="margin: 0 2px"
            disable-transitions
            v-show="row.isTop == 1"
            >置顶</el-tag
          >
          <el-tag
            effect="dark"
            size="mini"
            type="warning"
            style="margin: 0 2px"
            disable-transitions
            v-show="row.isHeadlines == 1"
            >头条</el-tag
          >
          <el-tag
            effect="dark"
            size="mini"
            type="success"
            style="margin: 0 2px"
            disable-transitions
            v-show="row.isRecommended == 1"
            >推荐</el-tag
          >
          <span class="cup" @click="handleEdit(row)">{{ row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="author"
        label="作者"
        width="150"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <span
            >{{ row.author1 }} {{ row.author2 }} {{ row.author3 }}
            {{ row.author4 }} {{ row.author5 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="classifyNames"
        label="栏目"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.classifyNames }}
        </template>
      </el-table-column>
      <el-table-column
        prop="clickCount"
        label="点击数"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="status" label="发布状态" width="100">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            active-value="1"
            inactive-value="0"
            :disabled="row.auditStatus != 2"
            @change="handleStatus(row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="审核状态" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.auditStatus == 0" class="color-info">暂存</span>
          <span v-if="row.auditStatus == 1" class="color-info">待审核</span>
          <span
            v-if="row.auditStatus == 2"
            class="color-success"
            style="cursor: pointer"
            title="查看审核流程"
            @click="handleLookFlow(row)"
            >已通过</span
          >
          <span
            v-if="row.auditStatus == 3"
            class="color-danger"
            style="cursor: pointer"
            title="查看审核流程"
            @click="handleLookFlow(row)"
            >未通过</span
          >
          <el-popover
            placement="top"
            title="审核说明"
            width="300"
            trigger="hover"
            style="margin-left: 5px"
            v-if="auditReason(row)"
            :content="row.auditReason"
          >
            <i class="el-icon-info" slot="reference"></i>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="{ row }">
          <el-dropdown split-button type="primary" size="small">
            <span @click="handlePreview(row)">预览</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :disabled="row.auditStatus == 1"
                @click.native="handleEdit(row)"
                >编辑</el-dropdown-item
              >
              <!-- <el-dropdown-item @click.native="handleMove(row)"
                >投递</el-dropdown-item
              > -->
              <el-dropdown-item
                v-if="row.auditStatus == 1"
                @click.native="handleTakeBack(row, 1)"
                >取回</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 0"
                @click.native="handleBatchSubmitAudit([row], 1)"
                >提交审核</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 2 || row.auditStatus == 3"
                @click.native="handleLookFlow(row)"
                >审核流程</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 2 && row.isTop != 1"
                @click.native="handleChangeState(row, 'isTop', 1)"
                >设置置顶</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 2 && row.isTop == 1"
                @click.native="handleChangeState(row, 'isTop', 0)"
                >取消置顶</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 2 && row.isHeadlines != 1"
                @click.native="handleChangeState(row, 'isHeadlines', 1)"
                >设置头条</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 2 && row.isHeadlines == 1"
                @click.native="handleChangeState(row, 'isHeadlines', 0)"
                >取消头条</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 2 && row.isRecommended != 1"
                @click.native="handleChangeState(row, 'isRecommended', 1)"
                >设置推荐</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.auditStatus == 2 && row.isRecommended == 1"
                @click.native="handleChangeState(row, 'isRecommended', 0)"
                >取消推荐</el-dropdown-item
              >
              <el-dropdown-item
                :disabled="row.auditStatus == 1"
                @click.native="handleDelete(row)"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <div slot="empty" class="emptyBg">
        <el-empty :image-size="200"></el-empty>
      </div>
    </el-table>
  </div>
</template>
<script>
import submitAudit from './submitAudit'
import Sortable from 'sortablejs'
export default {
  mixins: [submitAudit],
  data() {
    return {
      loading: false,
      listQuery: {
        page: 1,
        limit: 9999,
        journalId: '',
      },
      tableData: [],
      pageObj: {},
      sortFlag: false,
    }
  },
  props: ['journalId'],
  computed: {
    auditReason() {
      return (row) => {
        if (!row.auditReason) return
        return row.auditStatus == 2 || row.auditStatus == 3
      }
    },
  },
  mounted() {
    this.getList()
    this.sortInit()
    this.$bus.$on('refreshNewsContentsList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
      this.$refs.multipleTable.clearSelection()
    })
    this.$bus.$on('changeSortFlag', (v) => {
      this.sortFlag = v
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshNewsContentsList')
    this.$bus.$off('changeSortFlag')
  },
  watch: {
    journalId: {
      handler() {
        this.getList()
        this.$refs.multipleTable.clearSelection()
      },
    },
  },
  methods: {
    async getList() {
      this.loading = true
      this.tableData = []
      this.listQuery.journalId = this.journalId
      let res = await this.$store.dispatch('queryNewsContents', this.listQuery)
      this.tableData = res.data
      this.pageObj = res
      this.loading = false
    },
    //初始化排序
    sortInit() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const initSort = 10
      const _this = this
      Sortable.create(tbody, {
        handle: '.allowDrag',
        onEnd() {
          let tbodyDom = document.querySelector('.el-table__body-wrapper tbody')
          let idArr = []
          for (var i = 0; i < tbodyDom.children.length; i++) {
            let domId =
              tbodyDom.children[
                i
              ].children[1].children[0].children[0].getAttribute('data-id')
            idArr.push({
              id: domId,
              orderBy: i + initSort,
            })
          }
          _this.$bus.$emit('changeSortArr', idArr)
        },
      })
    },
    //编辑
    handleEdit(row) {
      this.$bus.$emit('showDialogNewsContentsAdd', row)
    },
    //预览
    handlePreview(row) {
      this.$bus.$emit('collectLogPreview', row)
    },
    //查看审核流程
    handleLookFlow(row) {
      let businessKey = 1 + ':' + row.id
      this.$set(row, 'businessKey', businessKey)
      this.$bus.$emit('showDialogFlowInfo', row)
    },
    //移动
    handleMove(row) {
      this.$bus.$emit('articleMove', row)
    },
    //批量操作
    handleSelectionChange(val) {
      this.$bus.$emit('deleteBatchNewsContents', val)
    },
    //发布
    async handleStatus(row) {
      await this.$store.dispatch('updateNewsContents', row)
      this.getList()
    },
    //删除
    handleDelete(row) {
      this.deleteTips(() => {
        this.delete(row)
      })
    },
    async delete(row) {
      await this.$store.dispatch('deleteNewsContents', row)
      this.getList()
    },
    //置顶-isTop 推荐-isRecommended 头条-isHeadlines 精选-isSelection
    async handleChangeState(row, arg, val) {
      let obj = {
        id: row.id,
      }
      obj[arg] = val
      await this.$store.dispatch('updateNewsContents', obj)
      this.getList()
    },
  },
}
</script>